<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>state练习-标签页</title>
    <style>
        .container{
            width: 600px;
            min-height: 500px;
            border:solid 1px #333;
            margin:100px auto; 
        }

        .head{
            border-bottom: solid 1px #aaa;
            overflow: hidden;
        }

        .head .item{
            padding: 10px 20px;
            float:left;
        }

        .head .item:hover{
            color: rgb(221, 47, 47);
        }

        .content {
            position: relative;
        }
        .content .item{
            width: 100%;
            height: 300px;
            position:absolute;
            left: 0;
            top:0;
        }
        .content .item:nth-child(1){
            background:#aef;
        }
        .content .item:nth-child(2){
            background:rgb(228, 170, 255);
        }
        .content .item:nth-child(3){
            background:rgb(183, 113, 223);
        }
        .content .item:nth-child(4){
            background:rgb(197, 103, 201);
        }

        .container .content .hidden{
            display:none;
        }
    </style>
</head>
<body>
    <div id="root">
        
    </div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
        // let arr = ['精选','美食','个护']

        class App extends React.Component{
            state = {
                index: 0
            }
            
            render(){
                //解构赋值
                let {index} = this.state;

                return <div className="container">
                    <div className="head">
                        <div className="item" onMouseOver={this.change(0)}>精选</div>
                        <div className="item" onMouseOver={this.change(1)}>美食</div>
                        <div className="item" onMouseOver={this.change(2)}>个护</div>
                        <div className="item" onMouseOver={this.change(3)}>百货</div>
                    </div>
                    
                    <div className="content">
                        {/*
                        <div className="item" style={{display: index === 0 ? 'block' : 'none'}}>精选</div>
                        <div className="item" style={{display: index === 1 ? 'block' : 'none'}}>美食</div>
                        <div className="item" style={{display: index === 2 ? 'block' : 'none'}}>个护</div>
                        <div className="item" style={{display: index === 3 ? 'block' : 'none'}}>百货</div>
                        */}

                        <div className={`item ${index === 0 ? '' : 'hidden'}`} >精选</div>
                        <div className={`item ${index === 1 ? '' : 'hidden'}`} >美食</div>
                        <div className={`item ${index === 2 ? '' : 'hidden'}`} >个护</div>
                        <div className={`item ${index === 3 ? '' : 'hidden'}`} >百货</div>
                    </div>
                    


                </div>
            }

            //绑定事件
            change = (i) => {
                return () => {
                    this.setState({
                        index: i
                    })
                }
            }
        }

        ReactDOM.render(<App />, document.querySelector("#root"));
    </script>
</body>
</html>